<template>
  <div class="login-wrap">
    <section>
      <h1 class="title">Welcome to Infinity</h1>
      <div class="login-form">
        <el-tooltip :value="show" manual popper-class="register-tips" effect="dark" :content="tips.content" placement="top-end">
          <router-link :to="tips.link" class="register"><i class="material-icons">{{tips.icon}}</i> </router-link>
        </el-tooltip>
        <div class="head-info">
          <label class="lbl-1"> </label>
          <label class="lbl-2"> </label>
          <label class="lbl-3"> </label>
        </div>
        <div class="clear"> </div>
        <div>
          <slot />
        </div>
        <div class="signin">
          <input type="submit" :value="submitText" @click="submitHandle">
        </div>
      </div>
    </section>
    <footer>
      <p>背景图来自 Infinity 用户 <a href="#" class="light-blue">@carvenzhang</a></p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'accountWrap',
  props: ['tips', 'submitText', 'submitHandle'],
  data() {
    return {
      avtar: require('./images/avtar.png'),
      show: false,
    };
  },
  mounted() {
    this.show = true;
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
@import "./style.scss";
</style>

<style>
  .register-tips {
    box-shadow: 0 0 5px #fff;
    animation: 1s ease-in displaynone alternate infinite;
  }

  @keyframes displaynone {
    from {
      opacity: 1;
    }
    80% {
      opacity: 0;
    }
    to {
      opacity: 0;
    }
  }
</style>

